<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import watermark from 'watermark-dom'
import {getConfigKey} from "@/api/system/config";
import {DARK_ROUTE_NAME_LIST, DARK_WATERMARK_DEFAULT_COLOR, LIGHT_WATERMARK_DEFAULT_COLOR} from "@/constant";

export default {
  name: "App",
  components: { ThemePicker },
    metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
    },
  data() {
    return {
      routeName: '',
      darkWatermarkColor: '',
      lightWatermarkColor: ''
    }
  },
  computed: {
    watermarkContent() {
      const name = this.$store.state?.user.name
      const nickname = this.$store.state?.user.nickname
      return name && nickname ? (name + '-' + nickname) : ' '
    }
  },
  watch: {
    async '$route'(to, from) {
      this.routeName = to.name; // 更新路由名称
      if (this.$store.state.user.token) {
        await this.getWatermarkColor()
        await this.watermarkInit()
      }
    }
  },
  methods: {
    // 初始化水印
    async watermarkInit() {
      const watermarkContent = this.watermarkContent
      if (this.$store.state.user.token) {
        const isDarkPage = DARK_ROUTE_NAME_LIST.includes(this.routeName);
        watermark.init({
          watermark_txt: watermarkContent,
          watermark_color: isDarkPage ? this.darkWatermarkColor : this.lightWatermarkColor,
          watermark_fontsize: '16px',
          watermark_alpha: 1,
          watermark_width: 150
        })
      }
    },
    async getWatermarkColor() {
      const [darkWatermarkColor, lightWatermarkColor] = await Promise.allSettled([
        getConfigKey('sys.darkWatermark.color'),
        getConfigKey('sys.lightWatermark.color')
      ]);
      this.darkWatermarkColor = darkWatermarkColor.value.data;
      this.lightWatermarkColor = lightWatermarkColor.value.data;
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}

::v-deep .el-table .el-table__header-wrapper th, ::v-deep .el-table .el-table__fixed-header-wrapper th {
  border: none !important;
  background-color: #F2F3F6 !important;
}
</style>
